---
title: Hyper Text
date: 2024-08-03
description: A text animation that scrambles letters before revealing the final text.
author: SwayambhuPrasad
published: true
---

<ComponentPreview name="hyper-text-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/hyper-text
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install motion
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="hyper-text" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx showLineNumbers
import { HyperText } from "@/components/ui/hyper-text"
```

```tsx showLineNumbers
<HyperText>Hover me</HyperText>
```

## Props

| Prop             | Type                | Default | Description                                   |
| ---------------- | ------------------- | ------- | --------------------------------------------- |
| `children`       | `string`            | `-`     | Text content to animate                       |
| `className`      | `string`            | `-`     | The class name to be applied to the component |
| `duration`       | `number`            | `800`   | Duration of the animation in milliseconds     |
| `delay`          | `number`            | `0`     | Delay before animation starts (in ms)         |
| `as`             | `React.ElementType` | `"div"` | Component to render as                        |
| `startOnView`    | `boolean`           | `false` | Start animation when component is in view     |
| `animateOnHover` | `boolean`           | `true`  | Enable hover animation                        |
| `characterSet`   | `string[]`          | `A-Z`   | Custom character set for scramble effect      |
